<template>
  <a-modal :title="title" v-model="visible" destroyOnClose :maskClosable="false" :confirmLoading="confirmLoading" @ok="handleOk" width="600px">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="用户名称" prop="username">
              <a-input v-model="form.username" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="密码" prop="mmpd">
              <a-input-password v-model="form.mmpd" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="电话" prop="phone">
              <a-input v-model="form.phone" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="昵称" prop="realname">
              <a-input v-model="form.realname" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="性别" prop="gender">
              <a-radio-group name="radioGender" v-model="form.gender">
                <a-radio v-for="item in $getDict('SEX_LIST')" :key="item.value" :value="item.value">{{item.label}}</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="角色" prop="roleId" :labelCol="{span:4}" :wrapperCol="{span:20}" v-if="form.roleId !== '1'">
              <ry-select v-model="form.roleId" :dataSource="rolesList" valueKey="id" labelKey="roleName" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
// import { pick } from 'lodash'
export default {
  name: 'UserModal',
  props: ['url', 'orgList'],
  components: {},
  data () {
    return {
      showPost: false,
      showDept: false,
      title: '操作',
      visible: false,
      confirmLoading: false,
      deptList: [],
      deptNewList: [],
      postList: [],
      form: {},
      rolesList: [],
      rules: {
        username: [{
          required: true,
          message: '请输入用户名称',
          trigger: 'blur'
        }],
        roleId: [{
          required: true,
          message: '请选择角色',
          trigger: 'select'
        }],
        mmpd: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        status: [{
          required: true,
          message: '请输入状态',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
  },
  methods: {
    add () {
      this.visible = true
      this.title = '新增用户'
      this.form = {}
      this.selectRole()
    },
    edit (record) {
      this.disabled = false
      this.visible = true
      this.title = '修改用户信息'
      this.form = {}
      this.form = { ...record }
      this.selectRole()
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    selectRole () {
      this.$post(this.url.roleList, {}).then(res => {
        if (res.code === 200) {
          this.rolesList = res.data.filter(item => item.roleCode !== 'admin').filter(item => item.roleCode !== 'customer')
        }
      })
    },
    handleOk () {
      // 触发表单验证
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let url = ''
          if (!this.form.id) {
            url = this.url.add
          } else {
            url = this.url.edit
          }
          this.$post(url, this.form).then(res => {
            if (this.isSuccess(res)) {
              this.confirmLoading = false
              this.$message.success('操作成功')
              this.close()
              this.$emit('ModalOk')
            } else {
              this.$message.error('操作失败')
              this.confirmLoading = false
            }
          }).catch(error => {
            console.log(error)
            this.confirmLoading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
